<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app">
        <h3>{{ title }}</h3>
        <div>
            <button @click="count--">-</button>
            <span>{{ count }}</span>
            <button @click="count++">+</button>
        </div>
    </div>
    <script src="js/vue.js"></script>
    <script>
        const app = new Vue({
            el: '#app',
            data: {
                count: 100,
                title: '计数器'
            },
            // // 创建阶段
            // beforeCreate(){
            //     console.log("beforeCreate",this.title)
            // },
            // created(){
            //     console.log("created",this.title,document.querySelector('span').innerHTML)
            // },
            // //挂载阶段
            // beforMount(){
            //     console.log("beforMount",this.title,document.querySelector("span").innerHTML)
            // },
            // mounted(){
            //     console.log("mounted",tihs.title,document.querySelector("span").innerHTML)
            // },
            // //更新阶段
            // beforUpdate(){
            //     console.log("beforUpdate",this.count,document.querySelector("span").innerHTML)
            // },
            // update(){
            //     console.log("update",this.count,document.querySelector("span").innerHTML)
            // },
            // //销毁阶段
            // beforDestroy(){
            //     console.log("beforDestroy")
            // }









            // //创建阶段，创建响应式数据
            // beforeCreate() {
            //     console.log('beforeCreate', this.count)
            // },
            // created() {
            //     console.log('created', this.count)
            // },
            // //挂载阶段,模板渲染
            // beforeMount() {
            //     console.log('beforeMount', document.querySelector('span').innerHTML)
            // },
            // mounted() {
            //     console.log('mounted', document.querySelector('span').innerHTML)
            // },
            // //更新阶段，更新视图
            // beforeUpdate() {
            //     console.log('beforeUpdate', this.count, document.querySelector('span').innerHTML)
            // },
            // updated() {
            //     console.log('beforeUpdate', this.count, document.querySelector('span').innerHTML)
            // },
            // //销毁阶段，销毁Vue实例对象
            // beforeDestroy() {
            //     console.log('beforeDestroy')
            // },
            // destroyed() {
            //     console.log('destroyed')
            // }
            // //执行app.$destroy(),主动销毁app实例


        })
    </script>
</body>

</html>